<template>
	<div class="mall-index" v-if='data'>
		<div class="index-top layout pl30rem pr30rem">
			<i class="iconfont icon-zuo white" @click="$router.back(-1)" style="font-size:1.6rem" v-if="showApp !='1' && isiOS !='1' "></i>
			<div class="search-mask" @click="toSearch"></div>
			<search-bar class="flex_1"></search-bar>
		<!-- 	<div class="inform">
				<span class="hint">99+</span>
				<i class="iconfont icon-news"></i>
			</div> -->
		</div>
		<section class="">
			<swiper :data="banner" :options="Options" img-key="adv_image" imgLink="adv_url" typeLink="mall">
			</swiper>
		</section>
		<section class="nav border-b20">
			<ul class='pl30rem pr30rem pb20'>
		       <!--  <li class="mt20" v-for="item in data.nav"><router-link :to="'/detail/nav-detail/' + item.nav_url +'?type=3'" class="fs14rem" :style="{backgroundImage:'url('+ img_url + item.logo + ')'}">{{ item.nav_title }}</router-link></li>
 -->
		        <li v-for="(item, index) in data.nav" class="mt20" :style="{ backgroundImage:'url(' + img_url + item.logo +'?x-oss-process=image/resize,m_pad,h_300)' }"  @click="jumpForDetail(item)">
		        	{{ item.nav_title }}
		        </li>
		    </ul>
		</section>
		<section class="advertising w100" v-if="data.banner2">
			<img class="responsive-img" :src="img_url + data.banner2[0].adv_image" alt="">
		</section>
		<section class="nominate" v-if="recommand.length > 0">
			<h3 class="product-title layout align-center"> 
				<p class="layout">
					<i class="rhombus rhombus-son"></i>
					<i class="rhombus ml15rem"></i>
				</p>
				<strong class='fs34rem c333 bold'>精选会场</strong>
				<p class="layout">
					<i class="rhombus mr15rem"></i>
					<i class="rhombus rhombus-son"></i>
				</p>
			</h3>
			<ul class="nominate-list pl30rem pr30rem layout flex-w">
				<router-link tag="li" :to="'/mall/mall-detail/' + item.goods_id" class="pb40rem" v-for="item in recommand" :key="item.goods_id">
					<div class="img-father">
						<img class="responsive-img" :src="img_url + item.pic_cover+'?x-oss-process=image/resize,m_pad,w_360,h_360'" alt="">
					</div>
					<p class="fs26rem black bold mt30rem mb20rem ellipsis-more" style="height:2.8rem;line-height:150%;">{{ item.goods_name }}</p>
					<strong class="fs34rem red ">￥{{ item.price }}元</strong>
				</router-link >
			</ul>
		</section>
	</div>
</template>

<script>
	import { getHomeZX, getRecommand } from '@/api/home';
	import SearchBar from '@/components/Search-bar';
	import Swiper from '@/components/Swiper';

	export default{
		components: {
			Swiper, 
			SearchBar
		},
		data()
		{
			return{
				data      : [],
				banner    : [],
				recommand : [],
				img_url   : process.env.IMG_URL,
				showApp   : window.sessionStorage.getItem('isapp'),
				isiOS     : this.$route.query.isapp,
				Options : {
					slidesPerView :'auto',
					loopedSlides: 'auto',
					autoplay: {
						delay: 5000,
					},
					pagination: {
				    	el: '.swiper-pagination',
				    	bulletClass : 'my-red'
					},
				}

			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				getHomeZX(3).then(res => {
					this.banner = res.data.banner;
					this.data = res.data;
				});
				var params = {
					type : 3
				};
				getRecommand(params).then(res =>{
					this.recommand = res.data;
				});
			},
			toSearch()
			{
				this.$router.push('/search');
			},
			jumpForDetail(item)
			{
				this.$router.push('/detail/nav-detail/' + item.nav_url +'?type=3')
			}
		}
	}
</script>

<style lang="less">
	.mall-index{
		.index-top{
			height: 90/28rem;
			background: #ff0036;
			.inform{
				color: #fff;
				position:relative;
				.hint{
					background: #fff;
					color: #ff0036;
					font-size: 20/28rem;
					text-align:center;
					width: 50/28rem;
					height: 25/28rem;
					line-height: 25/28rem;
					position: absolute;
					top:-5/28rem;
					right: -15/28rem;
					border-radius: 15/28rem;
				}
				i{
					font-size: 60/28rem !important;
				}
			}
			.search-mask{
				height: 3.2rem;
				width: 68%;
				position: absolute;			
				left:19%;
				z-index:2;
			}
		}
		.swiper-container{
			.swiper-wrapper{
				.swiper-slide {
					height: 380/28rem;
					img{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
			}
		}
		.nav{
			ul{
			    display: flex;
			    justify-content: space-between;
			    flex-wrap: wrap;
			    li{
			      	text-align: center;
			      	width: 20%;
			     	margin-top: 40/28rem;
			        font-size: 26/28rem;
			        color: #333;
			        padding-top: 100/28rem;
			        display: block;
			        background-position: top center;
			        background-size: 86/28rem;
			        background-repeat: no-repeat;
			    }
		  	}
		}
		.nominate{
			.nominate-list{
				li{
					width: 48%;
				}
				img{
					width: 330/28rem;
					height: 330/28rem;
					object-fit: cover;
				}
			}
		}
	}
</style>